<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: #F5F5F5;
			}
			footer{
				width: 1226px;
				height: 329.8px;
				background: white;
				margin: 30px auto;
			}
			
			header{
				margin: 0 auto;
				height: 58px;
				width: 1226px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;				
			}
			.mobile{
				font-size: 22px;
			    font-weight: 200;
			    color: #333;
			}
			.more{
				display: flex;
				flex-direction: row-reverse;
			}
			#more{
				font-size: 16px;
			    line-height: 58px;
			    color: #424242;
			    font-family: "微软雅黑";
			}
			#point{
				border-radius: 15px 15px 15px 15px;
				background: #b0b0b0;
			}
			#buttton{
				line-height: 58px;
			}
			.wrapper{
				margin: 0 auto;
				width: 1226px;
				height: 614px;
				background-color: #F5F5F5;
				display: flex;
				justify-content: space-between;
			}
			.left{
				width: 234px;
				align-items: stretch;			
				}
			.right{
				width: 992px;
				height: 614px;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
			}
			.top{
				width: 978px;
				height: 300px;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content:space-between;
    							
			}
			.bottom{
				width: 978px;
				height: 300px;
				flex-wrap: wrap;
				display: flex;
				flex-direction: row;
				justify-content:space-between;
				
			}
			.item1,.item2,.item3,.item4{
				width: 234px;
				height: 300px;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
			}
			.item5,.item6,.item7,.item8{
				width: 234px;
				height: 300px;
				background-color:white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			#p1{
				height: 18px;
			    font-size: 12px;
			    color: #B0B0B0;
			}
			#p2{
				font-size: 14px;
				color: #FF6700;
			}
			#grey{
				color:#B0B0B0;
			}
			.up{
				width: 1226px;
				height: 80px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1px solid #e0e0e0;
			}
			.h1,.h2,.h3,.h4,.h5{
				width: 19.8%;
			    font-size: 16px;
			    color: #616161;
			    line-height: 25px;
			    text-align: center;
			}
			.h1,.h2,.h3,.h4{
				border-right: 1px solid #e0e0e0;
			}
			.down{
				width: 1226px;
				height: 249.8px;
				margin: 0 auto;
				margin-top: 40px;
				display: flex;
				justify-content: center;
				justify-content: space-evenly
			}
			#p4{
				margin: -1px 0 26px;
			    font-size: 14px;
			    line-height: 1.25;
			    color: #424242;
			}
			#p3{
				cursor: pointer;
				font-size: 12px;
				color: #757575;
			}
			#seventh{
				width: 251px;
				border-left: 1px solid #e0e0e0;
				text-align: center;
			    color: #616161;
			}
			#phone{
				font-size: 22px;
				margin: 0;
			    line-height: 1;
			    color: #ff6700;
			}
			#time{
				font-size: 12px;
			}
			#artificial{
				border: 1px solid #FF6700;
			    background: #FFFFFF;
			    color: #FF6700;
			    width: 118px;
			    height: 29px;
			    font-size: 12px;
			    line-height: 28px;
			    margin: 0 auto;
			    text-align: center;
			}
			#artificial a:hover{
				background: #ff6700;
			 	color:white;
			}
			.follow{
				font-size: 12px;
				display: flex;
				flex-direction: row;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="mobile">
				手机
			</div>
			<div class="more">
				<div id="buttton"><button id="point">></button></div>	
				<div id="more">查看更多</div>
			</div>
		</header>
		<section>
			
			<div class="wrapper">
				<div class="left phone">
					<img src="../img/1.jpg" width="234px" height="614px"/>
				</div>
				<div class="right phone">
					<div class="top wrapper">
						<div class="item1">
							<img src="../img/2.jpg"width="150px" height="160px"/>
							<h3>Xiaomi MIX 4</h3>
							<p id="p1">CPU全面屏</p>
							<p id="p2">4999元起</p>
						</div>
						<div class="item2">
							<img src="../img/3.jpg"width="150px" height="160px"/>
							<h3>Note 10 Pro</h3>
							<p id="p1">天玑1100年度旗舰芯</p>
							<p id="p2">1599元起   <span id="grey"><s>1699元</s></span></p>
						</div>
						<div class="item3">
							<img src="../img/4.jpg"width="150px" height="160px"/>
							<h3>Redmi Note 10 5G</h3>
							<p id="p1">5G小金刚 | 旗舰长续航</p>
							<p id="p2">1099元起</p>
						</div>
						<div class="item4">
							<img src="../img/5.png"width="160px" height="160px"/>
							<h3>小米MIX FOLD</h3>
							<p id="p1">折叠大屏 | 自研芯片</p>
							<p id="p2">9999元起</p>
						</div>
					</div>
					<div class="bottom wrapper">
						<div class="item5">
							<img src="../img/6.png"width="160px" height="160px"/>
							<h3>小米11 Ultra</h3>
							<p id="p1">1/1.12''GN2｜2K四微曲屏</p>
							<p id="p2">5499元起 <span id="grey"><s>5999元</s></span></p>
						</div>
						<div class="item6">
							<img src="../img/7.jpg"width="150px" height="160px"/>
							<h3>小米11 Pro</h3>
						<p id="p1">1/1.12''GN2｜骁龙888</p>
						<p id="p2">4499元起 <span id="grey"><s>4999元</s></span></p>
						</div>
						<div class="item7">
							<img src="../img/8.png"width="160px" height="160px"/>
							<h3>小米11 青春版</h3>
							<p id="p1">小米11 青春版 轻薄</p>
							<p id="p2">2099元起 <span id="grey"><s>2200元</s></span></p>
						</div>
						<div class="item8">
							<img src="../img/9.png"width="160px" height="160px"/>
							<h3>K40 游戏增强版</h3>
							<p id="p1">轻薄电竞设计</p>
							<p id="p2">1999元起</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		
		<footer>
			<div class="up">
				<div class="h1">预约维修服务</div>
				<div class="h2">7天无理由退货</div>
				<div class="h3">15天免费换货</div>
				<div class="h4">满69包邮</div>
				<div class="h5">520余家售后网点</div>
			</div>
			<div class="down">
				<div class="first">
					<p id="p4">帮助中心</p>
					<p id="p3">账户管理</p>
					<p id="p3">购物指南</p>
					<p id="p3">订单操作</p>
				</div>
				<div class="second">
					<p id="p4">服务支持</p>
					<p id="p3">售后政策</p>
					<p id="p3">自助服务</p>
					<p id="p3">相关下载</p>
				</div>
				<div class="third">
					<p id="p4">线下门店</p>
					<p id="p3">小米之家</p>
					<p id="p3">服务网点</p>
					<p id="p3">授权体验店</p>
				</div>
				<div class="fourth">
					<p id="p4">关于小米</p>
					<p id="p3">了解小米</p>
					<p id="p3">加入小米</p>
					<p id="p3">投资者关系</p>
					<p id="p3">企业社会责任</p>
					<p id="p3">廉洁举报</p>
				</div>
				<div class="fifth">
					<p id="p4">关注我们</p>
					<p id="p3">新浪微博</p>
					<p id="p3">官方微信</p>
					<p id="p3">联系我们</p>
					<p id="p3">公益基金会</p>
				</div>
				<div class="sixth">
					<p id="p4">特色服务</p>
					<p id="p3">F 码通道</p>
					<p id="p3">礼物码</p>
					<p id="p3">防伪查询</p>
				</div>
				<div class="seventh">
					<p id="phone">400-100-5678</p>
					<p id="time">8:00-18:00（仅收市话费）</p>
					<div id="artificial">
						<a href="">人工客服</a>
					</div>	
					<div class="follow">
						<p id="xiaomi">关注小米：</p>	
						<div id="wbwx">
							<a href=""><img src="../img/wb.png" width="24px" height="24px"/></a>
							<a href=""><img src="../img/wx.png" width="24px" height="24px"/></a>
						</div>	
					</div>
																							
					
				</div>
			</div>
		</footer>
	</body>
</html>
